<!-- 选择宿舍楼 -->
<template>
  <div class="dormitory-container">
      <div class="main" v-if="props.dormitoryArr.length !== 0">
        <div
          class="box"
          v-for="item in props.dormitoryArr"
          :key="item.id"
          @click="transmit(item)"
        >
          <Box :colorArr="['#7817e7', '#ba3ae2']">
            <div class="content">
              <div class="icon">
                <Icon type="dormitory"></Icon>
              </div>
              <p class="title">{{ item.DormitoryName }}</p>
              <p class="people">以住人数: {{ item.dormitoryresided }}人</p>
              <p class="people">可住人数: {{ item.dormitoryCapacity }}人</p>
              <p class="people">
                宿舍管理员:
                {{ item.AdminInfon ? item.AdminInfon.Nickname : "暂无" }}
              </p>
              <p class="people">几人间: {{ item.fewPeople }}</p>
              <p class="people price">价格: {{ item.RoomRate.price }}元</p>
            </div>
          </Box>
        </div>
      </div>
  </div>
</template>

<script setup>
import Box from "@/components/Box/index.vue";
import Icon from "@/components/Icon/index.vue";
import { ref,onMounted } from "vue";
const props = defineProps({
  dormitoryArr:{
    type:Array,
    default: []
  }
})

import {useCheckInStore} from "@/store/useCheckInStore.js"
const store = useCheckInStore()
const {setDormitory} = store
// const dormitoryArrRef = ref([]) // 宿舍楼的信息
const emit = defineEmits(['closeMasking'])
// // 获取宿舍楼的信息
// onMounted(async ()=>{
//   dormitoryArrRef.value = await getDormitoryInfo(readUserInfo.value.classId)
// })
// 选择宿舍楼
function transmit(item){
  console.log(item);
  if(item.dormitoryresided >= item.dormitoryCapacity){
    ElMessage.error('该宿舍楼已满，请换个宿舍楼居住')
    return
  }
  setDormitory(item)
  // 关闭蒙层
  emit('closeMasking')
}

</script>

<style lang="less" scoped>
@import "@/styles/var.less";
@import "./styles/Select.less";
  .dormitory-container{
    width: 100%;
    height: 100%;
    .select();
  }
</style>